//背景
.body {
  background-color: rgb(0, 0, 0);
  height: 100vh;
}

.background {
  //position: inherit;
  width: 100%;
  height: 100vh;
  //background-image: url("http://img5.imgtn.bdimg.com/it/u=3865034104,2533845533&fm=26&gp=0.jpg");
  //background-size: cover;
  filter: blur(10px);
}

.main {
  .panel {
    color: #fff;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    padding: 1rem;
    margin-top: -70vh;
    &.panel-big {
      margin-top: -100vh;
    }

    .panel__content {
      margin-bottom: 5vh;
    }

    .btn-item {
      margin-top: 5vh;

      .at-button {
        margin-bottom: 2vh;
        font-weight: bold;
        line-height: 6vh;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.9);
        border: 3PX solid #fff;
      }
    }

    .at-form {
      display: block;
      padding-left: 0;
      background-color: rgba(0, 0, 0, 0.9);
      position: relative;
      color: #fff;

      ::-webkit-input-placeholder {
        color: #222;
      }

      .at-input {
        color: #fff;

        ::after {
          border: none;
        }

        padding: 0.512rem 0 0.512rem 0.512rem;
        background-color: rgba(0, 0, 0, 0.9);

        .at-input__title {
          color: #fff;
        }
      }
    }

    .example-item__desc {
      font-size: 0.8rem;
      margin-top: 0.5rem;
      position: relative;
    }

    .at-progress__content {
      position: relative;
      color: #fff;
    }

    .at-progress__outer-inner-background {
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 0;
    }
    .avatar {
      margin: 2vh auto;
      .at-avatar {
        position: relative;
        width: 100%;
        height: 100%;
        line-height: inherit;
      }
    }

  }
}
